<template>
  <el-container class="app-container">
    <el-collapse @change="handleCollapseChange"  v-model="collapseActiveName">
      <el-collapse-item :title="collapseTitle" name="1">
        <el-tabs type="border-card">
          <el-form :model="pageInfo" ref="form" label-width="120px" size="medium">
            <el-row>
              <el-col :span="6" :offset="0">
                <el-form-item prop="condition" label="用户：">
                  <el-input v-model.trim='pageInfo.condition' placeholder="请输入用户昵称或手机号" clearable></el-input>
                </el-form-item>
              </el-col>
              <el-col :span="6" :offset="0">
                <el-form-item prop="registerChannelName" label="用户来源：">
                  <el-select v-model="pageInfo.registerChannelName" clearable placeholder="请选择">
                    <el-option
                      v-for="item in channelOptions"
                      :key="item.inviteChannelId"
                      :label="item.channelName"
                      :value="item.channelName">
                    </el-option>
                  </el-select>
                </el-form-item>
              </el-col>
              <el-col :span="10" :offset="0">
                <el-form-item prop="courseProductId" label="注册时间：">
                  <el-date-picker
                    clearable
                    v-model="pageInfo.registDateRange"
                    type="datetimerange"
                    align="right"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions2"
                    @change="handleDateRange(arguments[0],'regist')"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
            </el-row>
            <el-row>
              <el-col :span="12" :offset="0">
                <el-form-item prop="name" label="最近购买时间：">
                  <el-date-picker
                    clearable
                    v-model="pageInfo.recentBuyDateRange"
                    type="datetimerange"
                    align="right"
                    value-format="yyyy-MM-dd HH:mm:ss"
                    unlink-panels
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    :picker-options="pickerOptions2"
                    @change="handleDateRange(arguments[0],'recentBuy')"
                  >
                  </el-date-picker>
                </el-form-item>
              </el-col>
              <el-col :span="8" :offset="3">
                <el-row class='tx-c'>
                  <el-button type="primary" icon="el-icon-search" @click='getFilterData'>搜索</el-button>
                  <el-button @click="resetForm">重置</el-button>
                </el-row>
              </el-col>
            </el-row>

          </el-form>
        </el-tabs>
      </el-collapse-item>
    </el-collapse>

    <el-tabs class="m-t-20" v-model="activeTabName" type="card" @tab-click="changeTab">
      <el-tab-pane v-for="(item,index) in propList" :name="item.name" :label="item.label" :key="index"
                   type="grade"></el-tab-pane>
    </el-tabs>

    <!--表格-->
    <table-view
      :templateDiv="templateDiv"
      :editBtnMap="true"
      :editBtnMapList="editBtnMapList"
      :columns="tableContent"
      :pageList="columnData"
      @edit-btnclick="editBtnClick"
    >
      <div slot="learnStatus" slot-scope="scope">
        {{scope.row.learnStatus | learnStatusFilter}}
      </div>
      <div slot="nickname" slot-scope="scope" style="position: relative">
        <span v-if="scope.row.tag" :class="scope.row.tag==='待转化'?'warming tag':'danger tag'">{{scope.row.tag}}</span>
        {{scope.row.nickname}}
      </div>
    </table-view>

    <!--分页-->
    <pagination-view  :pagesize="pageInfo.pageSize"
      :currentPage="pageInfo.pageNumber"
      :total="total"
      @size-change="sizeChange"
      @current-change="pageChange"
    ></pagination-view>

    <el-header></el-header>

    <el-dialog title="备注" :visible.sync="dialogVisible" width="50%" :destroy-on-close="true">
      <el-form ref="form" :model="form" :rules="rule" label-width="100px" style="width: 85%">
        <el-form-item prop="record" label="备注:">
          <el-input v-model.trim="form.record" type="textarea" placeholder="请填写备注"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="addFollow">提交</el-button>
          <el-button @click="dialogVisible=false">取消</el-button>
        </el-form-item>
      </el-form>
    </el-dialog>
  </el-container>
</template>

<script>
  import channelApi from '@/api/system/baseOption/channel'
  import tabstatus from './tabstatus'
  import TableView from '@/components/TableView'
  import PaginationView from '@/components/PaginationView'
  import * as pageApi from '@/api/user/userManage'

  export default {
    name: 'list',
    mixins: [],
    components: {
      TableView,
      PaginationView
    },
    data() {
      return {
        dialogVisible:false,
        form:{
          userId:'',
          record:''
        },
        rule:{
          record:[
            {required:true,trigger:'blur',message:'请填写备注'},
            {min:1,max:500,message:'最多不超过500个汉字'}
            ]
        },
        templateDiv: {
          learnStatus: true,
          nickname: true
        },
        propList: [{
          label: '全部',
          name: 'null'
        },{
          label: '已注册',
          name: '0'
        }, {
          label: '已体验',
          name: '1'
        }, {
          label: '已购买',
          name: '2'
        }],
        activeTabName: 'null',

        channelOptions: [],

        pickerOptions2: {
          shortcuts: [{
            text: '最近一周',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近一个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30)
              picker.$emit('pick', [start, end])
            }
          }, {
            text: '最近三个月',
            onClick(picker) {
              const end = new Date()
              const start = new Date()
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 90)
              picker.$emit('pick', [start, end])
            }
          }]
        },
        tableContent: tabstatus['null'],
        columnData: [],
        editBtnMapList: ['view','follow'],  //自定义的按钮内容
        customWidth: '',
        pageInfo: {
          pageNum: 1,
          pageSize: 20,
          condition: "",
          endPayTime: "",
          endRegisterTime: "",
          learnStatus: 'null',//学习状态 0已注册；1已体验；2学习中；3学习结束）
          registerChannelName: "",
          startPayTime: "",
          startRegisterTime: "",
          registDateRange: '',
          recentBuyDateRange:'',
        },
        total: 0
      }
    },
    filters:{
      learnStatusFilter(val){
        return {
          0:'已注册',
          1:'已体验',
          2:'学习中',
          3:'学习结束',
        }[val]
      }
    },
    methods: {
      getFilterData(){
        this.pageInfo.pageNumber = 1
        this.getData()
      },
      changeTab(tab) {
        this.pageInfo.pageNumber = 1
        let name = tab.name
        let numberReg = /[0-9]+$/
        this.tableContent = numberReg.test(name)?tabstatus[Number(name)]:tabstatus['null']
        this.pageInfo.learnStatus = name
        this.getData()
      },
      handleDateRange(val,type) {
        switch (type) {
          case 'regist':
            this.pageInfo.startRegisterTime = val[0]
            this.pageInfo.endRegisterTime = val[1]
            break
          case 'recentBuy':
            this.pageInfo.startPayTime = val[0]
            this.pageInfo.endPayTime = val[1]
            break
        }
      },
      // pageSize变化函数
      sizeChange(val) {
        this.pageInfo.pageSize = val
        this.getData()
      },
      // page变化函数
      pageChange(val) {
        this.pageInfo.pageNumber = val
        this.getData()
      },

      editBtnClick(val, index, type) {
        switch (type) {
          case 'view':
            this.$router.push({
              name: 'userDetail',
              query: {
                id: val.userId
              }
            })
            break
          case 'follow':
            this.form.record = ''
            this.form.userId = val.userId
            this.dialogVisible = true
            break
        }
      },
      //拉取列表
      getData() {
        pageApi.getList(this.pageInfo).then(res => {
          this.columnData = res.body.records
          this.total = Number(res.body.total)
          this.pageInfo.pageNumber = Number(res.body.pageNumber) || 1
        })
      },

      //清空搜索条件
      resetForm() {
        this.activeTabName = 'null'
        this.tableContent = tabstatus['null']
        this.pageInfo = {
          pageNum: 1,
          pageSize: 20,
          condition: "",
          endPayTime: "",
          endRegisterTime: "",
          learnStatus: 'null',//学习状态 0已注册；1已体验；2学习中；3学习结束）
          registerChannelName: "",
          startPayTime: "",
          startRegisterTime: "",
          registDateRange: '',
          recentBuyDateRange:'',
        }
        this.getData()
      },
      getTabCount() {
        pageApi.getTabCount().then(res => {
          this.propList.map(item => {
            for (let i in res.body) {
              if (item.name == i&&item.name != '2') {
                item.label = `${item.label}(${res.body[i]})`
              }
            }
            if (item.name == '2'){
              item.label = `${item.label}(${res.body[2]+res.body[3]})`
            }
            if (item.name == 'null') {
              item.label = `${item.label}(${res.body[-1]})`
            }
          })
        })
      },
      //获取渠道来源列表
      getChannel(){
        channelApi.getChannelList({enable:1}).then(res=>{
          this.channelOptions = res.body
        })
      },
      //添加备注
      addFollow(){
        pageApi.addFollow(this.form).then(res=>{
          this.handleMessage(res)
          this.getData()
          if(res.code === '200'){
            this.dialogVisible= false
          }
        })
      }
    },
    mounted() {
      this.getData()
      this.getChannel()
     // this.getTabCount()
    }
  }
</script>

<style lang="scss" scoped>
  .manage {
    padding: 50px;
  }
  .tag{
    font-pageSize: 12px;
    border-radius: 3px;
    white-space: nowrap;
    color: white;
    padding:2px
  }
  .warming{
    background: #E6A23C;
  }
  .danger{
    background: #F56C6C;
  }
</style>
